<template>
  <form>
    <!-- 返回添加英雄页面 -->
     <button @click.prevent="$router.push('/hero')" class="btn btn-primary">返回</button>
    <legend>添加英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input v-model.trim="hero.heroName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="hero.gender"> 男
        <input type="radio" value="女" v-model="hero.gender"> 女
      </div>
    </div>
    <button @click.prevent="hAdd" class="btn btn-primary">提交</button>
  </form>
</template>

<script>
// import axios from 'axios'
export default {
    name:'HeroAdd',
    data (){
      return{
        hero:{
          heroName:'',
          gender:'男'
        }
      }
    },
    methods:{
      hAdd (){
        console.log(this.hero);
        if(this.hero.heroName == ''){
          return
        }
        this.$http({
          method:'post',
          url:'heroes',
          //根据RESTFul接口要求进行传入参数
          data:{
            heroName: this.hero.heroName,
            gender:this.hero.gender,
            cTime:new Date()
          }
        }).then(res => {
          console.log(res);
          alert('添加成功')
          this.$router.push('/hero');
        })
        .catch(err => {
          console.log(err);
          alert('添加失败')
        });
      }
    }
};
</script>
